<template>
	<!-- 变电站 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">全矿用电概况</text></view>
				</template>
				<my-grid :list="list" :decimals="1"></my-grid>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">变电站运行概况</text></view>
				</template>
				<view class="">
					<up-text text="35kv变电站" :bold="true"></up-text>
					<view class="p-10 m-t-10" style="background-color: #F5F7FE;" v-for="(item,index) in list1">
						<view class="flex m-between">
							<up-text :text="item.name" :bold="true" color="#0052D9" size="16"></up-text>
							<view class="flex m-center s-center"> 状态: <u-badge class="m-l-5 m-r-5" :isDot="true" type="success"></u-badge> <up-text :text="item.status" :bold="true" color="#00B578" size="14"></up-text>
							</view>
						</view>
						<view class="m-t-10">
							<view class="flex"> 负荷值: <text class="m-l-5" style="color: #0052D9; font-weight: bold;">{{item.value}}</text> <text style="color: #9E9E9E;">MW</text> </view>
							<view class=""> 负荷率: <text class="m-l-5" style="color: #0052D9; font-weight: bold;">{{item.value1}}</text> <text style="color: #9E9E9E;">%</text> </view>
						</view>
					</view>
				</view>
				<view class="m-t-20">
					<up-text text="10kv变电站" :bold="true"></up-text>
					<view class="p-10 m-t-10" style="background-color: #F5F7FE;" v-for="(item,index) in list1">
						<view class="flex m-between">
							<up-text :text="item.name" :bold="true" color="#0052D9" size="16"></up-text>
							<view class="flex m-center s-center"> 状态: <u-badge class="m-l-5 m-r-5" :isDot="true" type="success"></u-badge> <up-text :text="item.status" :bold="true" color="#00B578" size="14"></up-text>
							</view>
						</view>
						<view class="m-t-10">
							<view class="flex"> 负荷值: <text class="m-l-5" style="color: #0052D9; font-weight: bold;">{{item.value}}</text> <text style="color: #9E9E9E;">MW</text> </view>
							<view class=""> 负荷率: <text class="m-l-5" style="color: #0052D9; font-weight: bold;">{{item.value1}}</text> <text style="color: #9E9E9E;">%</text> </view>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2])
	let list = ref([{
			title: '总负荷',
			value: '227.5',
			unit: 'MW'
		}, {
			title: '用电负荷率',
			value: '88.1',
			unit: '%'
		}, {
			title: '今日用电量',
			value: '22.2',
			unit: 'MWh'
		}]),
		list1 = ref([{
			name: '1号变压器',
			status: '运行',
			value: '226.77',
			value1: '88.2'
		}, {
			name: '2号变压器',
			status: '运行',
			value: '226.77',
			value1: '88.2'
		}])
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}

	.leader-list {
		.leader-list-item {
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052D9;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;

				.location {
					width: 80rpx;
					height: 80rpx;
					background: url('/static/img/arrow.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>